<template>
    <div class="researchHomePageBox">
        <div class="menuWarp">
            <div class="menuInner" v-if="!isShowManagement">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
                    <el-menu-item index="researchOtherHome">教研首页</el-menu-item>
                    <el-menu-item index="researchOtherGroup">教研组</el-menu-item>
                    <el-menu-item index="researchAlbum">教研相册</el-menu-item>
                    <el-menu-item index="researchOtherActivity">教研活动</el-menu-item>
                    <el-menu-item index="researchachIevements">教研成果</el-menu-item>
                    <el-menu-item index="researchResources">教研资源</el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="main" v-if="!isShowManagement">
            <router-view />
        </div>
        <div class="main" v-if="isShowManagement">
            <ManagementList :menuTabList='menuTabList' :activeMenuIndex='activeMenuIndex'></ManagementList>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import ManagementList from "@c/managementList/researchManagementList"
    export default {
        components:{
            ManagementList
        },
        watch:{
            $route:{
                 handler(val){
                     if(val.query.routePath){
                         this.activeIndex = val.query.routePath
                     }else{
                        this.activeIndex = this.getCaption(val.path) 
                     }
                 },
                 deep :true
             },
        },
        computed:{
            ...mapState({
                isShowManagement: state => state.commonModule.isShowManagement,
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo
            })
        },
        created(){
            if(this.userInfo.id ==this.otherUserInfo.id){
                this.$store.commit('commonModule/INIT_ISMANAGER',true);
            }else{
                this.$store.commit('commonModule/INIT_ISMANAGER',false);
            }
            this.menuTab(4)
        },
        data() {
            return {
                menuTabList:'',
                activeMenuIndex:'research',
                activeIndex: 'researchOtherHome', 
            }
        },
        methods: {
            getCaption(obj){
                var index=obj.lastIndexOf("/");
                obj=obj.substring(index+1,obj.length);
                return obj;
            },
            handleSelect(key, keyPath) {
            },
            menuTab(params){
                this.$store.dispatch('commonModule/menuTab',{
                    type: params
                }).then( res =>{
                    if(res.data.code =200){
                        this.menuTabList = res.data.result
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    .researchHomePageBox {
        width: 100%;
        .menuWarp{
            width: 100%;
            background-color: white;
            .menuInner{
                width: 81%;
                margin: 0 auto;
            }
        }
        .main{
            width: 100%;
        }

    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>